<template>
  <view class="content">
    <!-- 待兑换||已完成 -->
    <view class="to_be_redeemed ml">
      {{ orderStatus == 1 ? $t("order.Complete") : $t("newDeal.redeemed") }}
    </view>
    <view class="tip_text ml">
      <text class="middle">{{ $t("order.closed-tips") }}</text>
      <text class="blod_time middle">23:59:53</text>
    </view>
    <view class="view_bg" style="margin-top: 30rpx">
      <view class="tit">
        <text class="blod_number middle">1.6</text>
        <text class="ml-10 middle">CNY</text>
        <text class="arrowhead middle">→</text>
        <text class="blod_number middle">20</text>
        <text class="ml-10 middle">RUB</text>
      </view>
      <view class="list_items mt-20">
        <view>{{ $t("order.Exchange-rate") }}</view>
        <view>1:12.5</view>
      </view>
      <view class="list_items mt-20">
        <view>{{ $t("newDeal.sendId") }}</view>
        <view>1:12.5</view>
      </view>
    </view>

    <view class="view_bg" style="margin-top: 30rpx">
      <view class="list_items">
        <view>{{ $t("order.order-number") }}</view>
        <view>1:12.5</view>
      </view>
      <view class="list_items mt-20">
        <view>{{ $t("newDeal.createTime") }}</view>
        <view>1:12.5</view>
      </view>
    </view>

    <view class="view_bg" style="margin-top: 30rpx">
      <view class="tips2">{{ $t("newDeal.tips") }}</view>
      <view class="foot_btn">
        <view class="gray-button">{{ $t("order.contact-administrator") }}</view>
        <view class="gray-button">{{ $t("order.contact-Sellor") }}</view>
      </view>
    </view>

    <view style="height: 200rpx"></view>
    <view class="foot_fixed">
      <button class="btn">{{ $t("discover.exchange") }}</button>
    </view>

    
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderStatus: 2,
    };
  },
  methods: {
  },
};
</script>

<style lang="scss" scoped>
.foot_fixed {
  position: fixed;
  bottom: 100rpx;
  left: 0;
  right: 0;
  margin: 0 30rpx;
}
.btn {
  background-color: #61bdb2;
  color: #fff;
  border-radius: 999rpx;
}
.foot_btn {
  margin-top: 40rpx;
  display: flex;
  justify-content: flex-end;
}
.gray-button {
  display: inline-block;
  border-radius: 80rpx;
  opacity: 1;
  border: 2rpx solid rgba(135, 135, 135, 0.6);
  font-size: 28rpx;
  font-weight: 500;
  color: #878787;
  text-align: center;
  padding: 20rpx;
  margin-left: 20rpx;
}
.tips2 {
  font-size: 26rpx;
  color: #888;
}
.mt-20 {
  margin-top: 20rpx;
}
.list_items {
  color: #6c6c6c;
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.arrowhead {
  margin: 0 10rpx;
}
.tit {
  color: #888;
  font-size: 24rpx;
}
.ml-10 {
  margin-left: 10rpx;
}
.blod_number {
  font-size: 32rpx;
  color: #fd751c;
}
.middle {
  vertical-align: middle;
}
.content {
  padding: 25rpx 30rpx 0;
  .view_bg {
    border-radius: 16rpx;
    padding: 20rpx 30rpx;
    background-color: #fff;
    margin-top: 20rpx;
  }
  .to_be_redeemed {
    font-size: 32rpx;
    color: #61bdb2;
    font-weight: bold;
  }
  .ml {
    margin-left: 30rpx;
  }
  .tip_text {
    color: #888;
    font-size: 24rpx;
    margin-top: 10rpx;
    .blod_time {
      font-size: 32rpx;
      color: #fd751c;
      margin-left: 6rpx;
    }
  }
}
</style>
